<template>
	<view class="container">
		<view class="header">
			<text class="title">🔧 接单平台</text>
			<text class="subtitle">专业技术服务平台</text>
		</view>
		
		<view class="status">
			<text class="status-text">✅ 应用已成功启动</text>
			<text class="time">{{ currentTime }}</text>
		</view>
		
		<view class="actions">
			<button class="btn primary" @click="testFunction">测试功能</button>
			<button class="btn secondary" @click="goLogin">前往登录</button>
		</view>
		
		<view class="debug-info">
			<text class="debug-title">调试信息:</text>
			<text class="debug-item">当前页面: pages/index/index</text>
			<text class="debug-item">Vue版本: {{ vueVersion }}</text>
			<text class="debug-item">UniApp版本: 2.x</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'HomePage',
		data() {
			return {
				currentTime: '',
				vueVersion: '2.6.x'
			}
		},
		onLoad() {
			console.log('首页已加载')
			this.updateTime()
			this.timer = setInterval(this.updateTime, 1000)
		},
		onUnload() {
			if (this.timer) {
				clearInterval(this.timer)
			}
		},
		methods: {
			updateTime() {
				const now = new Date()
				this.currentTime = now.toLocaleTimeString()
			},
			testFunction() {
				uni.showToast({
					title: '功能测试成功！',
					icon: 'success'
				})
				console.log('测试功能被调用')
			},
			goLogin() {
				console.log('跳转到登录页')
				uni.navigateTo({
					url: '/pages/login/login'
				}).catch(err => {
					console.error('跳转失败:', err)
					uni.showToast({
						title: '跳转失败',
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		display: flex;
		flex-direction: column;
	}
	
	.header {
		text-align: center;
		margin-bottom: 60rpx;
		
		.title {
			display: block;
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.subtitle {
			display: block;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.8);
		}
	}
	
	.status {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 40rpx;
		text-align: center;
		
		.status-text {
			display: block;
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}
		
		.time {
			display: block;
			font-size: 24rpx;
			color: rgba(255, 255, 255, 0.7);
		}
	}
	
	.actions {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}
	
	.btn {
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		border: none;
		
		&.primary {
			background: #fff;
			color: #667eea;
		}
		
		&.secondary {
			background: rgba(255, 255, 255, 0.2);
			color: #fff;
			border: 2rpx solid rgba(255, 255, 255, 0.3);
		}
	}
	
	.debug-info {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 15rpx;
		padding: 30rpx;
		
		.debug-title {
			display: block;
			font-size: 24rpx;
			color: #fff;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		
		.debug-item {
			display: block;
			font-size: 22rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-bottom: 10rpx;
		}
	}
</style>